<template>
	<view class="page">
		<view class="wrapper">
			<form>
				<view class="cu-form-group">
					<view class="title">姓名</view>
					<input class="ipt" placeholder="请输入" name="input" v-model="form.name"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">手机号码</view>
					<input class="ipt" placeholder="请输入" name="input" v-model="form.mobile"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">所在地区</view>
					<input class="ipt" placeholder="请输入" name="input" @tap="showPicker('region')" :value="result"></input>
					<text class='cuIcon-locationfill text-white'></text>
				</view>
				
				<view class="cu-form-group">
					<textarea maxlength="-1" placeholder="详细地址" v-model="form.detail"></textarea>
				</view>
				
				<view class="cu-form-group">
					<view class="title">设为默认</view>
					<switch class="green" :class="defaultChoice ? 'checked' : '' " @change="switchDefault"></switch>
				</view>
				
				
				<view class="btn-wrrapper">
					<button class="cu-btn btn block radius bg-green" @click="submit">
						保存
					</button>
				</view>
			</form>
			
			<w-picker
				class="city"
				mode="region"
				:value="defaultRegion"
				default-type="value"
				:hide-area="false"
				@confirm="onConfirm($event,'region')"
				@cancel="onCancel"
				ref="region" 
			></w-picker>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				defaultRegion:["150000","150100","150103"],
				result: '省-市-区',
				defaultChoice: false,
				form: {
					province: '',
					city: '',
					area: '',
					detail: '',
					name: '',
					mobile: '',
					is_default: false,
					area_code: ''
				}
			}
		},
		onLoad(opt) {
			if (opt.id) {
				this.getInfo(opt.id);
			}
		},
		methods: {
			showPicker(type){
				this.$refs[type].show();
			},
			onConfirm(res,type){
				this.result=res.result;
				
				let {obj, value} = res

				this.form.province = obj.province.label
				this.form.city = obj.city.label
				this.form.area = obj.area.label
				this.form.area_code = value
				
				console.log(res)
			},
			switchDefault(e) {
				this.defaultChoice = e.detail.value
				this.form.is_default = e.detail.value
			},
			submit() {
				if (this.form.name) {
					this.$u.post('/address/update', this.form).then(res => {
						if (res.data.success) {
							uni.showToast({
								title: '保存成功',
								icon: 'none'
							})
							
							uni.navigateBack();
						}
					})
				} else {
					uni.showToast({
						title: '请完善信息',
						icon: 'none'
					})
				}
			},
			getInfo(id) {
				this.$u.get('/address/detail?id=' + id).then(res => {
					let add = res.data.result.address
					this.form = add
					this.defaultRegion = add.area_code
					this.result = add.province + add.city + add.area
					if (add.is_default == 1) {
						this.defaultChoice = true
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		color: #fff;
	}
	.city {
		color: black;
	}
	.uni-input-input {
		color: #fff !important;
	}
	
	.cu-form-group {
		background: #242644;
		border-color: #393C52;
		.title {
			width: 180rpx;
		}
		.ipt {
			color: #fff;
		}
	}
	.btn-wrrapper {
		padding: 0 50rpx;
		.btn {
			background-color: #00D388;
			margin-top: 100rpx;
		}
	}	   
	uni-switch.green[checked] .wx-switch-input, uni-switch[checked] .wx-switch-input, uni-checkbox.green[checked] .wx-checkbox-input, uni-checkbox[checked] .wx-checkbox-input, uni-radio.green[checked] .wx-radio-input, uni-radio[checked] .wx-radio-input, uni-switch.green.checked .uni-switch-input, uni-switch.checked .uni-switch-input, uni-checkbox.green.checked .uni-checkbox-input, uni-checkbox.checked .uni-checkbox-input, uni-radio.green.checked .uni-radio-input, uni-radio.checked .uni-radio-input {
		background-color: #00D388 !important;
		border-color: #00D388 !important;
		color: #ffffff !important;
		border-color: #39B54A !important;
	}
</style>
